<template>
	<view>
		<back></back>
		<view class="item it_flex">
			<view class="it_left">模板名称</view>
			<input type="text" placeholder="请输入模板名称" v-model="name" />
		</view>
		<view class="item u-flex u-row-between">
			<view class="title">计价方式</view>
			<view class="u-flex">
				<view class="u-flex" style="margin-left: 20rpx;" @click="radClick(index)" v-for="item,index in list">
					<view class="radius u-flex-center" :class="index == tIndex ? 'rad_css' : ''">
						<u-icon name="checkmark" size="20" color="#fff" v-if="index == tIndex"></u-icon>
					</view>
					<view class="grey">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="item u-flex u-row-between">
			<view class="title">全选</view>
			<view class="u-flex">
				<view class="u-flex" style="margin-left: 20rpx;" @click="quanxuanClick()">
					<view class="radius u-flex-center" :class="quanxuan == 1 ? 'rad_css' : ''">
						<u-icon name="checkmark" size="20" color="#fff" v-if="quanxuan == 1"></u-icon>
					</view>
					<!-- <view class="grey">全选</view> -->
				</view>
			</view>
		</view>

		<view class="item " v-for="item,index in quList" :key="index">
			<view class="top u-flex u-row-between">
				<!-- <view>除新疆以外地区包邮</view> -->
				<input type="text" v-model="item.title" style="text-align: left;" />
				<view class="u-flex">
					<image class="del" src="@/static/wImg/delGrey.png" @click="dellist(index)"></image>
					<image class="edit" src="@/static/wImg/editGrey.png" @click="bjlist(index)"></image>
				</view>
			</view>

			<view class="it_right_duo">
				<view class="address" v-if="item.address.length>0&&quanxuan==0" @click="choseAdres(index)">
					<view class="" v-for="items in item.address">{{items}},</view>
				</view>
				<view class="cont u-flex-center" @click="choseAdres(index)" v-if="quanxuan==0">选择配送区域</view>
				<view class="u-flex u-row-between u-flex-wrap it_rig_line">
					<view class="it_ban u-flex">
						<view class="it_left" v-if="tIndex == 1">首重</view>
						<view class="it_left" v-else>首件</view>
						<input type="number" placeholder="请输入" v-model="item.first" />
					</view>
					<view class="it_ban u-flex">
						<view class="it_left">运费</view>
						<input type="number" placeholder="请输入" v-model="item.first_fee" />元
					</view>
					<view class="it_ban u-flex">
						<view class="it_left" v-if="tIndex == 1">续重</view>
						<view class="it_left" v-else>续件</view>
						<input type="number" placeholder="请输入" v-model="item.additional" />
					</view>
					<view class="it_ban u-flex">
						<view class="it_left">运费</view>
						<input type="number" placeholder="请输入" v-model="item.additional_fee" />元
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="item">
			<view class="top u-flex u-row-between">
				<view>可配送地区2</view>
				<view class="u-flex">
					<image class="del" src="@/static/wImg/delGrey.png"></image>
					<image class="edit" src="@/static/wImg/editGrey.png"></image>
				</view>
			</view>
			
		</view> -->
		<view class="add u-flex-center" @click="getAdd()" v-if="tIndex!=2">新增配送区域</view>
		<view class="submit u-flex-center" @click="getSave()">保存</view>
		<view class="layer" v-if="is_area_show">
			<view class="layer-content">
				<view
					class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between">
					<view class="text-cc" @click="is_area_show=false">取消</view>
					<view class="" style="color:#007aff;" @click="adresSubmit()">确定</view>
				</view>
				<picker-view :value="multiIndex" :indicator-style="indicatorStyle" class="picker-view"
					@change="changeAdres">
					<picker-view-column>
						<view class="item-pircker" v-for="(item,index) in arealist1" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="arealist2">
						<view class="item-pircker" v-for="(item,index) in arealist2" :key="index">{{item.name}}</view>
					</picker-view-column>
					<!-- <picker-view-column v-if="arealist3">
						<view class="item-pircker" v-for="(item,index) in arealist3" :key="index">{{item.name}}</view>
					</picker-view-column> -->
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tIndex: 0,
				name: "",
				list: ['按件数', '按重量', '免运费'],
				is_area_show: false,
				// 城市地区
				arealist1: [],
				arealist2: [],
				arealist3: [],
				areaname: "",
				multiIndex: [0, 0, 0],
				indicatorStyle: 'height: 80rpx;',
				quList: [],
				listindex: "",
				id: "",
				quanxuan: 0,
				is_chose:1,
				is_sa:1
			}
		},
		onLoad(options) {
			this.id = options.id ? options.id : ''
			if (options.id) {
				uni.setNavigationBarTitle({
					title: '修改运费模版'
				})
			}
		},
		onReady() {
			this.$u.post('/api/index/area_list', {}).then(res => {
				if (res.code == 1) {
					var address = res.data
					this.arealist1 = address
					this.arealist2 = address[0].children
					this.arealist3 = address[0].children[0].children
				}
			})
			if (this.id) {
				this.$u.post('/api/shop/get_logistics_details', {
					ids: this.id
				}).then(res => {
					if (res.code == 1) {
						// this.quList = res.data.children
						this.name = res.data.name
						this.tIndex = res.data.valuation
						this.quanxuan = res.data.quanxuan
						this.quList = res.data.children

						for (let i = 0; i < this.quList.length; i++) {
							this.quList[i].aa = ''
						}
						this.quList = this.quList
						console.log(this.quList, 'qu')
					}
				})
			}

		},
		methods: {
			quanxuanClick() {
				this.quanxuan = this.quanxuan == 0 ? 1 : 0
			},
			radClick(index) {
				this.tIndex = index
			},
			changeAdres(e) {
				let curMultiIndex = e.detail.value
				if (curMultiIndex[0] != this.multiIndex[0]) {
					this.multiIndex = [curMultiIndex[0], 0, 0]
				} else if (curMultiIndex[1] != this.multiIndex[1]) {
					this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0]
				} else if (curMultiIndex[2] != this.multiIndex[2]) {
					this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]]
				}
				console.log(this.multiIndex)
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				this.arealist2 = this.arealist1[i].children
				this.arealist3 = this.arealist1[i].children[j].children
				console.log(this.cateid)
			},
			adresSubmit() {
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				this.is_chose = 1
				this.areaname = this.arealist1[i].name + '/' + this.arealist1[i].children[j].name
				// + '/' + this.arealist1[i].children[j].children[k].name
				this.quList.forEach((item, i) => {
					if (i == this.listindex) {
						item.address.forEach((items, j) => {
							if (items == this.areaname) {
								uni.showModal({
									title: '',
									content: '请勿重复选择',
									showCancel: false,
								})
								this.is_chose =2
								return false
							}
						})
					}
				})
				this.is_area_show = false
				var provinceid = this.arealist1[i].id
				var cityid = this.arealist1[i].children[j].id
				// console.log(this.quList[this.listindex].address)
				// this.quList[this.listindex].address.push(this.areaname)
				if(this.is_chose == 1){
					this.quList.forEach((item, i) => {
						if (i == this.listindex) {
							item.address.push(this.areaname)
							item.province.push(provinceid)
							item.citys.push(cityid)
						}
					})
				}
				
				this.quList = this.quList
				console.log(this.quList)
			},
			choseAdres(index) {
				this.listindex = index
				this.is_area_show = true
			},
			//添加新地址
			getAdd() {
				var arr = {
					title: "",
					address: [],
					province: [],
					citys: [],
					first: "",
					first_fee: '',
					additional: "",
					additional_fee: "",
					aa: 1
				}
				this.quList.push(arr)
			},
			getSave() {
				this.is_sa = 1
				if(this.quanxuan==0){
					this.quList.forEach((item, i) => {
						if (item.address.length==0) {
							uni.showModal({
								title: '',
								content: '请选择配送区域',
								showCancel: false,
							})
							this.is_sa = 2
							return false
						}
						if (item.first=='') {
							uni.showModal({
								title: '',
								content: this.tIndex == 1 ? '请输入首重' : '请输入首件',
								showCancel: false,
							})
							this.is_sa = 2
							return false
						}
						if (item.first_fee=='') {
							uni.showModal({
								title: '',
								content: this.tIndex == 1 ? '请输入首重运费' : "请输入首件运费",
								showCancel: false,
							})
							this.is_sa = 2
							return false
						}
						if (item.additional=='') {
							uni.showModal({
								title: '',
								content: this.tIndex == 1 ? "请输入续重" : '请输入续件',
								showCancel: false,
							})
							this.is_sa = 2
							return false
						}
						if (item.additional_fee=='') {
							uni.showModal({
								title: '',
								content: this.tIndex == 1 ? "请输入续重运费" : '请输入续件运费',
								showCancel: false,
							})
							this.is_sa = 2
							return false
						}
					})
				}else{
					this.quList.forEach((item, i) => {
						if (item.first=='') {
							uni.showModal({
								title: '',
								content: this.tIndex == 1 ? '请输入首重' : "请输入首件",
								showCancel: false,
							})
							this.is_sa = 2
							return false
						}
						if (item.first_fee=='') {
							uni.showModal({
								title: '',
								content: this.tIndex == 1 ? '请输入首重运费' : "请输入首件运费",
								showCancel: false,
							})
							this.is_sa = 2
							return false
						}
						if (item.additional=='') {
							uni.showModal({
								title: '',
								content: this.tIndex == 1 ? "请输入续重" : '请输入续件',
								showCancel: false,
							})
							this.is_sa = 2
							return false
						}
						if (item.additional_fee=='') {
							uni.showModal({
								title: '',
								content: this.tIndex == 1 ? "请输入续重运费" : '请输入续件运费',
								showCancel: false,
							})
							this.is_sa = 2
							return false
						}
					})
				}
				if(this.is_sa==2){
					return false
				}
				this.$u.post('/api/shop/add_logistics', {
					name: this.name,
					valuation: this.tIndex,
					quList: this.quList,
					logistics_id: this.id ? this.id : '',
					quanxuan: this.quanxuan
				}).then(res => {
					if (res.code == 1) {
						uni.showModal({
							title: res.msg,
							showCancel: false,
							success() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						uni.showModal({
							title: res.msg,
							showCancel: false,
						})
					}
				})

			},
			dellist(index) {
				this.quList.splice(index, 1)
			},
			bjlist(index) {
				for (let i = 0; i < this.quList.length; i++) {
					if (i == index) {
						this.quList[i].aa = '1'
					}
				}
				this.quList = this.quList
				console.log(this.quList)
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		padding: 0 33rpx;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	.it_flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item {
		padding: 32rpx 30rpx;
		background: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		margin-top: 30rpx;

		.top {
			font-weight: bold;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #DFDFDF;

			.del {
				width: 36rpx;
				height: 36rpx;
			}

			.edit {
				width: 34rpx;
				height: 34rpx;
				margin-left: 28rpx;
			}
		}


		.it_left {
			font-weight: bold;
			color: #222;
		}

		input {
			font-size: 28rpx;
			text-align: right;
		}


		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.radius {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			margin-right: 10rpx;
			border: 1rpx solid #888;
		}

		.rad_css {
			background: #606DCE;
			border: 1rpx solid #606DCE;
		}

		.grey {
			color: #333;
			font-size: 28rpx;
		}

		.cont {
			width: 510rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #606DCE;
			margin: 0 auto;
			margin-top: 30rpx;
			background: #E0FEF4;
			border-radius: 10rpx;
		}
	}

	.it_right_duo {
		border-bottom: 1rpx solid #DFDFDF;

		&:last-child {
			border: none;
		}
	}

	.address {
		font-size: 24rpx;
		color: #888;
		margin-top: 20rpx;
		line-height: 40rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-line-clamp: 3;
		// -webkit-box-orient: vertical;
		display: flex;
		flex-wrap: wrap;
	}

	.it_ban {
		width: 50%;
		margin-top: 19rpx;

		input {
			width: 170rpx;
			height: 52rpx;
			font-size: 24rpx;
			background: #F5F5F5;
			border-radius: 26rpx;
			text-align: center;
			margin-left: 20rpx;
		}
	}

	.add {
		width: 256rpx;
		height: 60rpx;
		font-size: 28rpx;
		color: #FFF;
		margin: 0 auto;
		margin-top: 30rpx;
		background: linear-gradient(98deg, #5D64CA 0%, #6F9BDF 100%);
		border-radius: 40rpx;
	}

	.submit {
		width: 630rpx;
		height: 80rpx;
		font-size: 28rpx;
		color: #FFF;
		margin: 0 auto;
		margin-top: 280rpx;
		background: linear-gradient(98deg, #5D64CA 0%, #6F9BDF 100%);
		border-radius: 40rpx;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.layer-content {}

	/* 浮层内容 */
	.confirm-bar {
		position: fixed;
		bottom: 600rpx;
		left: 0;
		width: 750rpx;
	}

	.line-height-80 {
		height: 80rpx;
		line-height: 80rpx;
	}

	.padding-lr-30 {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.bg-ff {
		background: #fff;
	}

	.border-bottom-ed {
		border-bottom: 1rpx solid #ededed;
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		background: #fff;
	}

	.item-pircker {
		line-height: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>